<template>
	<view>
		<view class="container" v-if="isShow">
			<!-- 标题 -->
			<custom-header title="支付宝账号"></custom-header>

			<!-- 顶部提示 -->
			<view class="tip-box">
				<image src="/static/images/ic_sale-pop.png"></image>
				<text class="tip-text">支付宝账号用户名，必须与认证的姓名一致，否则无法提现</text>
			</view>

			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 真实姓名 -->
				<view class="form-item">
					<text class="item-label">真实姓名</text>
					<view class="item-label">{{ realName }}</view>
				</view>

				<!-- 身份证号 -->
				<view class="form-item">
					<text class="item-label">身份证号</text>
					<view class="item-label">{{ idCard }}</view>
				</view>

				<!-- 支付宝号输入 -->
				<view class="form-item input-item">
					<text class="item-label">支付宝号</text>
					<input class="input" placeholder="请输入支付宝账号" v-model="account" placeholder-class="placeholder" />
				</view>

				<!-- 交易密码 -->
				<view class="form-item input-item">
					<text class="item-label">交易密码</text>
					<input class="input" password placeholder="请输入您的交易密码" v-model="password"
						placeholder-class="placeholder" />
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-btn" @click="handleSubmit">立即添加</view>

			<!-- 忘记密码 -->
			<view class="forget-pwd" @click="gotoForgetPwd">
				<text>忘记交易密码</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.realName = this.$app.getRealName()
			this.idCard = this.$app.getIdNum()
		},
		data() {
			return {
				realName: '', // 写死的真实姓名
				idCard: '', // 写死的身份证号
				account: "", // 支付宝账号
				password: "", // 交易密码
				isShow: uni.getStorageSync("isShow"),
			}
		},
		methods: {
			// 提交处理
			async handleSubmit() {
				if (!this.account || !this.password) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}

				const res = await this.$http({
					method: 'POST',
					url: '/user/account/add',
					data: {
						accType: 1,
						account: this.account,
						fundPwd: this.password
					}
				});

				if (res) {
					uni.showToast({
						title: '添加成功'
					})
					uni.navigateBack()
				}

			},

			// 跳转忘记密码
			gotoForgetPwd() {
				uni.navigateTo({
					url: '/pages/find-fund-password/find-fund-password' // 修改为实际路径
				})
			}
		}
	}
</script>

<style lang="scss">
	/* 提示框样式 */
	.tip-box {
		display: flex;
		align-items: center;
		background-color: #FFFBE8;
		padding: 16rpx 32rpx;
		margin-bottom: 20rpx;

		image {
			width: 23rpx;
			height: 23rpx;
			margin-right: 20rpx;
		}

		.tip-text {
			color: #ED6A0C;
			font-size: 24rpx;
		}
	}

	.form-container {
		padding: 0 70rpx;
		margin-bottom: 42rpx;

		/* 表单样式 */
		.form-item {
			padding: 30rpx 0;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.09);
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.input-item {
			display: flex;
			align-items: center;
		}

		.item-label {
			font-size: 28rpx;
			color: #000;
		}

		.input {
			text-align: right;
			flex: 1;
			font-size: 28rpx;
			color: #000;
			height: 48rpx;
		}

		.placeholder {
			color: rgba(0, 0, 0, 0.40);
		}
	}

	/* 提交按钮 */
	.submit-btn {
		margin: 0 32rpx;
		margin-bottom: 30rpx;
		background-color: #4D7EF4;
		color: #FFF;
		border-radius: 8rpx;
		text-align: center;
		font-size: 28rpx;
		padding: 18rpx 0;
	}

	/* 忘记密码 */
	.forget-pwd {
		text-align: center;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.40);
	}
</style>